<template>
  <div :class="{'mobile-staff-entrust-service-wrap':showMobilePage}" class="staff-entrust-service-wrap">
    <div v-if="!isExhibition" class="pay-way">
      <div class="deadline-box">
        <el-form-item :prop="moduleName + '.deadlineType'" label-width="80px" label="" style="margin-right: 32px;">
          <el-select v-model="selectData.deadlineType" placeholder="期限类型" popper-class="global-select-down" >
            <el-option
              v-for="item in staffCooperDeadlineTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value" />
          </el-select>
        </el-form-item>
      </div>
      <div class="account-period-box">
        <el-form-item :prop="moduleName + '.accountPeriod'" label-width="80px" label="">
          <el-select v-model="selectData.accountPeriod" placeholder="结算周期" popper-class="global-select-down" >
            <el-option
              v-for="item in settlePeriodOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value" />
          </el-select>
        </el-form-item>
      </div>
      <div class="period-box">
        <el-form-item v-if="selectData.accountPeriod === 4" :prop="moduleName + '.period'" label-width="80px" label="">
          <el-input v-model="selectData.period" placeholder="请输入期数" type="number" />
        </el-form-item>
      </div>
    </div>
    <div v-if="!isExhibition">
      <div :class="{'mobile-create-flex': showMobilePage}" class="stages-box">
        <div class="stages">
          <div v-for="(item, index) in selectData.items" :key="index" class="date-picker-item stages-items" >
            <div class="pay-time-type-select">
              <el-form-item :rules="rules['contractInfo.cooperDate.items.timeType']" :prop="'contractInfo.cooperDate.items.' + index + '.timeType'">
                <el-select v-model="item.timeType" placeholder="付款时间" popper-class="global-select-down" >
                  <el-option
                    v-for="item in staffCooperPayTimeTypeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value" />
                </el-select>
              </el-form-item>
            </div>
            <el-form-item :rules="rules['contractInfo.cooperDate.items.payDate']" :prop="'contractInfo.cooperDate.items.' + index + '.payDate'" class="stages-date-picker-error">
              <stages-date-picker :index="index" v-model="item.payDate" @delete="deleteStage" />
            </el-form-item>
          </div>
        </div>
        <div class="add-btn" style="margin-bottom: 8px" @click="add">
          添加
        </div>
      </div>
    </div>
    <div v-if="isExhibition">
      <div style="display: flex;">
        <div class="gray-radio">委托服务(附期限采购)类</div>（{{ selectData.deadlineType | mapOptions(staffCooperDeadlineTypeOptions) }}）
      </div>
      <div>
        <span style="color: #666;">
          <span style="color: #999;">结算周期: </span>
          {{ selectData.accountPeriod | mapOptions(settlePeriodOptions) }}
        </span>
        <span v-if="selectData.accountPeriod === 4" style="color: #666;">({{ selectData.period || '--' }} 期)</span>
      </div>
      <template v-if="selectData.items && selectData.items.length">
        <div v-for="(item, index) in selectData.items" :key="index" style="color: #666;">
          {{ `付款日期（第${index + 1}期）: ` }}{{ item.payDate / 1000 | standardFormat('YYYY/MM/DD') }}
        </div>
      </template>
    </div>
  </div>
</template>
<script>
import { staffCooperDeadlineTypeOptions, settlePeriodOptions, staffCooperPayTimeTypeOptions } from '../../module/options';
import StagesDatePicker from './stagesDatePicker';
import addIcon from '@/assets/reportManage/add_icon.png';
import { mapOptions } from '@/filters';
import { standardFormat } from '@/filters/date';
import { mapState } from 'vuex';
export default {
  name: 'StaffEntrustService',
  components: { StagesDatePicker },
  filters: {
    mapOptions,
    standardFormat
  },
  model: {
    prop: 'params',
    event: 'change'
  },
  props: {
    params: {
      type: Object,
      default: () => {
        return null;
      }
    },
    moduleName: {
      type: String,
      default: ''
    },
    rules: {
      type: Object,
      default: () => {
        return null;
      }
    },
    isExhibition: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      staffCooperDeadlineTypeOptions,
      settlePeriodOptions,
      staffCooperPayTimeTypeOptions,
      addIcon
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    selectData: {
      get() {
        return this.params;
      },
      set(val) {
        this.$emit('change', val);
      }
    }
  },
  methods: {
    add() {
      const item = { payDate: '', timeType: '' };
      this.selectData.items.push(item);
    },
    deleteStage(index) {
      if (index !== -1) {
        this.selectData.items.splice(index, 1);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
@import url('./common.scss');
.stages-date-picker-error {
  & ::v-deep {
    .el-form-item__error {
      margin-left: 120px;
    }
  }
}
.pay-way {
  display: flex;
}
.deadline-box {
  & ::v-deep {
    .el-input__inner {
      width: 106px !important;
    }
  }
}
.pay-time-type-select{
  height: 40px;
  & ::v-deep {
    .el-input__inner {
      width: 106px !important;
    }
  }
}
.period-box {
  & ::v-deep {
    .el-input__inner {
      width: 106px !important;
    }
  }
}
.stages {
  // margin-top: 16px;
}
.stages-items {
  display: flex;
  // margin-bottom: 18px
}
.mobile-staff-entrust-service-wrap {
  .pay-time-type-select{
    width: 100%;
    & ::v-deep {
      .el-input__inner {
        width: 100% !important;
      }
    }
  }
}
.mobile-create-flex {
  ::v-deep {
    .el-form-item {
      margin-bottom: 16px !important;
    }
    .el-form-item__error {
      margin-left: 0 !important;
    }
  }
  .stage-items {
    flex-wrap: wrap;
  }
  .date-picker-item {
    margin-bottom: 0 !important;
    flex-wrap: wrap;
  }
}
</style>
